<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
//@ts-expect-error
import chinaJson from './china.json'
let mapContainer = ref()
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
  let myChart = echarts.init(mapContainer.value)
  myChart.setOption({
    title: {
      text: '实时物流图',

      left: 'center',
      top: '100px',
      textStyle: {
        color: 'aqua',
        fontSize: 26,
      },
    },
    geo: {
      map: 'china',
      top: 150,
      zoom: 1.2,
      //   roam: true,
      itemStyle: {
        areaColor: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'red', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'blue', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      label: {
        show: true,
        color: '#fff',
      },
      emphasis: {
        itemStyle: {},
        label: {
          fontSize: 40,
        },
      },
    },
    series: {
      type: 'lines',

      effect: {
        show: true,
        symbol: 'arrow',
        symbolSize: 10,
        trailLength: 0.5,
      },
      data: [
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [121.472644, 31.231706], // 终点

            // 如果 polyline 为 true 还可以设置更多的点
          ],
          // 统一的样式设置
          lineStyle: {
            color: '#fff',
            width: 3,
            opacity: 0.7,
            type: 'dashed',
            join: 'miter',
          },
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [123.429096, 41.796767], // 终点
            // 如果 polyline 为 true 还可以设置更多的点
          ],
          // 统一的样式设置
          lineStyle: {
            color: '#fff',
            width: 3,
            opacity: 0.7,
            type: 'dashed',
            join: 'miter',
          },
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [87.617733, 43.792818], // 终点
            // 如果 polyline 为 true 还可以设置更多的点
          ],
          // 统一的样式设置
          lineStyle: {
            color: 'yellow',
            width: 3,
            opacity: 0.7,
            type: 'dashed',
            join: 'miter',
          },
        },
        {
          coords: [
            [116.405285, 39.904989], // 起点
            [104.065735, 30.659462], // 终点
            // 如果 polyline 为 true 还可以设置更多的点
          ],
          // 统一的样式设置
          lineStyle: {
            color: 'pink',
            width: 3,
            opacity: 0.7,
            type: 'dashed',
            join: 'miter',
          },
        },
        {
          coords: [
            [101.778916, 36.623178], // 起点
            [119.306239, 26.075302], // 终点
            // 如果 polyline 为 true 还可以设置更多的点
          ],
          // 统一的样式设置
          lineStyle: {
            color: 'black',
            width: 3,
            opacity: 0.7,
            type: 'dashed',
            join: 'miter',
          },
        },
      ],
    },
  })
})
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>
